<template>
	<div class="user">
		<div class="bb">
		<div class="rr">
			<div class="dd">
				<img src="../../assets/img/null.fcc19d3e.png" />
			</div>
			<div class="kk">
				<font>去登录/注册</font>
				<p>
					新用户注册送388元大礼包
				</p>
			</div>
		</div>
		<div class="yy">
			<a class="xx">
				<div class="oo"></div>
				<div class="nn"></div>
				<div class="qq">
					<div class="bt">游侠风户外会员</div>
					<div class="pa">全站200+户外线路免费畅玩</div>
				</div>
				<div class="ui">立即开通</div>
			</a>
		</div>
		<div class="po">
			<div class="yt">
			<div class="yu">全部订单</div>
			<div class="yo">查看全部</div>
			</div>
			<div class="kt">
				<div class="qy1">
				<i></i>
				<p>待付款</p>
				</div>
				<div class="qy2">
				<i></i>
				<p>已付款</p>
				</div>
				<div class="qy3">
				<i></i>
				<p>待评价</p>
				</div>
				<div class="qy4">
				<i></i>
				<p>退款/售后</p>
				</div>
			</div>
			<div class="pi1">
				<div class="pi2">
				我的钱包
				<i></i>
				</div>
			</div>
			<div class="r1">
				<div class="r2">我的服务</div>
					<div class="r4">
						<a class="w1">
							<i></i>
							<p>常用收货地址</p>
						</a>
						<a class="w2">
							<i></i>
							<p>常用出行人</p>
						</a>
						<a class="w3">
							<i></i>
							<p>修改密码</p>
						</a>
						<a class="w4">
							<i></i>
							<p>在线客服</p>
						</a>
						
						<a class="w5">
							<i></i>
							<p>游侠客App</p>
						</a>
					</div>
					<div class="gg">
						<div class="gi">
							<img src="../../assets/img/img19.750c255a.png" />
							精选推荐
							<img src="../../assets/img/img20.51bebaf2.png" />
						</div>
						<div class="gu">
							<a></a>
							<div class="gu2">
								<div class="gu3">美景探索 | 成都出发</div>
								<div class="gu4"></div>
								<div class="gu5">
									<b>提前60天减￥100</b>
								</div>
							</div>
							
							<a></a>
							<div class="diao">
								<div class="gu3">户外游 | 丽江出发</div>
								<div class="gu4"></div>
							</div>
							
							<div>
							<div class="gu6">
								[冬日奇幻川西]12.30批次确定发团！海螺沟冰川-四姑娘山双桥沟-鱼子西秋千-雅家梗红石滩-雅拉雪山-墨石公园-贡嘎雪山-新都桥，川西冰雪温泉5日深度游！
							</div>
							<div class="gu7">
								<span>￥</span>
								<b>2580</b>起
								<p>5天4晚</p>
							</div>
							</div>
							
							<div>
							<div class="gu6">
								[梅里转山·跨年特辑]12.26~1.1！2022朝圣梅里雪山，徒步雨崩村-冰湖-神瀑，7日轻装徒步（新增：千人长桌宴+锅庄舞跨年夜+转经筒新年祈福）
							</div>
							<div class="gu7">
								<span>￥</span>
								<b>1980</b>起
								<p>7天6晚</p>
							</div>
							</div>
							
							<a></a>
							<div class="gy">
								<div class="gu3">摄影游 | 荣成出发</div>
								<div class="gu4"></div>
								
							</div>
							
							<a></a>
							<div class="gy2">
								<div class="gu3">美景探索 | 拉萨出发</div>
								<div class="gu4"></div>
							</div>
							
							<div>
							<div class="gu6">
								[荣成天鹅摄影]1-2月，深入烟墩角，与候鸟共舞，同精灵漫步，观天鹅大迁徙4日冬季摄影创作团！
							</div>
							<div class="gu7">
								<span>￥</span>
								<b>1580</b>起
								<p>4天3晚</p>
							</div>
							</div>
							
							<div>
							<div class="gu6">
								[冬游西藏 • 梦幻蓝冰A线]燃灯节特辑招募！普莫雍措-扎寺-珠峰大本营-喜马拉雅-多情措-羊卓雍措！★拉萨3晚四钻酒店，可自选升级洲际！去世界屋脊寻找"蓝精灵"！7日！
							</div>
							<div class="gu7">
								<span>￥</span>
								<b>2880</b>起
								<p>7天6晚</p>
							</div>
							</div>
							
							<a></a>
							<div class="gy3">
								<div class="gu3">美景探索 | 伊宁市</div>
								<div class="gu4"></div>
								
							</div>
							
							<a></a>
							<div class="gy4">
								<div class="gu3">休闲度假 | 成都出发</div>
								<div class="gu4"></div>
								<div class="gu5">
									<b>提前60天减￥100</b>
								</div>
							</div>
							
							<div>
							<div class="gu6">
								[玩转伊宁•赛湖蓝冰]12-2月新疆："大西洋的蓝色眼泪"赛里木湖360°环湖，邂逅梦幻蓝冰，遇见蓝冰之眼，打卡冰泡湖，冬季赛里木湖1-2日游（2人成行）
							</div>
							<div class="gu7">
								<span>￥</span>
								<b>569</b>起
								<p>2天1晚</p>
							</div>
							</div>
							
							<div>
							<div class="gu6">
								[冰雪九寨环线]12-2月，避开旺季人群纷扰，邂逅冬日静谧九寨黄龙，撒欢毕棚沟，登达古冰川，两晚轻享九寨沟五星度假体验，打卡抖音同款华美达温泉酒店，冬游川西7日深度游！
							</div>
							<div class="gu7">
								<span>￥</span>
								<b>4180</b>起
								<p>7天6晚</p>
							</div>
							</div>
							
							<a></a>
							<div class="gy5">
								<div class="gu3">摄影游 | 乌鲁木齐出发</div>
								<div class="gu4"></div>
								
							</div>
							
							<a></a>
							<div class="gy6">
								<div class="gu3">深度人文 | 贵阳出发</div>
								<div class="gu4"></div>
							</div>
							
							<div>
							<div class="gu6">
							[赛湖蓝冰+天鹅泉冬摄]12-2月新疆："蓝色水晶"赛里木湖（蓝冰、冰泡、冰眼）-伊犁天鹅泉（天鹅、雾凇、晨雾、霞光）-昭苏天马踏雪-独山子大峡谷-乌苏胡杨林，9日摄影
							</div>
							<div class="gu7">
								<span>￥</span>
								<b>4980</b>起
								<p>9天8晚</p>
							</div>
							</div>
							
							<div>
							<div class="gu6">
								[贵州跨年 • 元旦特辑]12.30-1.3侗族村寨跨年（侗族踩歌堂+篝火烟花狂欢+侗族长桌宴），冰雪梵净山登山新年祈福，岜沙苗寨鸣枪迎新年，5日元旦跨年之旅
							</div>
							<div class="gu7">
								<span>￥</span>
								<b>2680</b>起
								<p>5天4晚</p>
							</div>
							</div>
							
							
							
							<a></a>
							<div class="gy7">
								<div class="gu3">户外游 | 成都出发</div>
								<div class="gu4"></div>
								
							</div>
							
							<a></a>
							<div class="gy8">
								<div class="gu3">摄影游 | 西安出发</div>
								<div class="gu4"></div>
							</div>
							
							<div>
							<div class="gu6">
							[跨年登高 • 四姑娘山嘉年华]登顶5025/5276雪山之巅；双桥沟攀冰初体验；与三获金犀牛攀登大神零距离对话；藏式跨年晚会；赠送登顶证书，5日雪山圆梦之旅！
							</div>
							<div class="gu7">
								<span>￥</span>
								<b>2680</b>起
								<p>5天4晚</p>
							</div>
							</div>
							
							<div>
							<div class="gu6">
							[人间惊鸿宴·冬摄老君山]冬季限定美景！老君山行摄两日/古风模特，龙门石窟震撼夜景，三门峡天鹅限季风情，地坑院原始民居，日出日落星河，周内错峰，5天4晚，西安出发！
							</div>
							<div class="gu7">
								<span>￥</span>
								<b>2680</b>起
								<p>5天4晚</p>
							</div>
							</div>
							
							
						</div>
					</div>
				</div>
			</div>
		</div>
		<BottomNav :propsurl='arrUrl'></BottomNav>
	</div>
</template>

<script>
	import BottomNav from '../default/BottomNav.vue';
	export default{
		name:'User',
		components:{
			BottomNav
		},
		data(){
			return{
				arrUrl :['imgss/di2.png', 'imgss/di3.png' , 'imgss/di6.png']
			}
		}
	}
</script>
<style scoped>
	.user{
		width: 100%;
		margin: 0 auto;
		    height: 100%;
		    overflow-x: hidden;
		    background: #f5f5f5;
	}
	.rr{
		    height: 3.63rem;
		    background: #fff url(../../assets/img/img17.e30088ce.png) center center no-repeat;
		    background-size: cover;
			position: absolute;
			    display: flex;
			    align-items: center;
				width: 100%;
	}
	.dd img{
		    margin-top: -.75rem;
		    margin-left: .25rem;
		    width: 1.6rem;
		    height: 1.6rem;
		    border-radius: 50%;
		    background-size: cover;
	}
	.kk font{
		    position: relative;
		    font-size: .34rem;
		    font-weight: bold;
		    color: #000;
			margin-left: 10px;

	}
	.kk p{
		    width: 4.3rem;
		    height: .5rem;
		    line-height: .5rem;
		    text-align: center;
		    font-size: .35rem;
		    color: #fff;
			margin-top: 20px;
		    border-radius: .25rem;
		    background: linear-gradient(to right, #ff6000, #ffa32c);
	}
	.xx{
		position: relative;
		    display: inline-flex;
		    align-items: center;
		    margin-left: 12%;
		    width: 9.03rem;
		    height: 1.52rem;
			border-radius: 12px;
		    background: url(../../assets/img/card2.e9ca58c4.png) center center no-repeat;
		    background-size: cover;
			margin-top: 170px;
			
	}
	.oo{
		position: absolute;
		    left: 0;
		    top: 0;
		    width: 1.2rem;
		    height: .56rem;
		    background: url(../../assets/img/card3.a090db77.png) center center no-repeat;
		    background-size: cover;
	}
	.nn{
		margin-left: .24rem;
		    width: 1.02rem;
		    height: .68rem;
		    background: url() center no-repeat;
		    background-size: cover;
	}
	.qq{
		display: flex;
		    flex-direction: column;
		    margin-left: .16rem;
	}
	.bt{
		line-height: .4rem;
		    font-size: .38rem;
		    color: #fef6a2;
	}
	.pa{
		margin-top: .08rem;
		    line-height: .28rem;
		    font-size: .3rem;
		    color: #fef6a2;
	}
	.ui{
		position: absolute;
		    right: .23rem;
		    top: .23rem;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    width: 1.54rem;
		    height: .5rem;
		    font-size: .2rem;
		    color: #333;
		    border-radius: .2rem;
		    background: linear-gradient(
		270deg
		, #FFE494, #FEF6A2);
	}
	.po{
		   padding: 0 .2rem;
		    background: #ffffff;
		    border-radius: .16rem;
	}
	.yt{
		display: flex;
		    align-items: center;
		    justify-content: space-between;
		    height: .93rem;
		    margin-bottom: .02rem;
			width: 500px;
			margin: auto;
	}
	.yu{
		font-size: .32rem;
		    color: #333;
		    font-weight: 500;
	}
	.yo{
		font-size: .34rem;
		    color: #bbb;
		    padding-right: .28rem;
		    background: url(../../assets/img/icon_next.ce6cf995.png) no-repeat right center;
		    background-size: .24rem .24rem;
	}
	.kt{
		padding-bottom: .11rem;
		    display: flex;
		    justify-content: space-around;
	}
	.qy1{
		text-align: center;
		    position: relative;
	}
	.qy1 i{
		display: inline-block;
		   width: .84rem;
		   height: .84rem;
		    background: no-repeat center/cover;
		    margin-bottom: .1rem;
		    position: relative;
			background-image: url(../../assets/img/icon_waitpay_3@2x.png)
	}
	.qy1 p{
		font-size: .34rem;
		    color: #363636;
		    line-height: 1;
	}
	.qy2{
		text-align: center;
		    position: relative;
	}
	.qy2 i{
		display: inline-block;
		    width: .84rem;
		    height: .84rem;
		    background: no-repeat center/cover;
		    margin-bottom: .1rem;
		    position: relative;
			background-image: url(../../assets/img/icon_success_3@2x.png)
	}
	.qy2 p{
		font-size: .34rem;
		    color: #363636;
		    line-height: 1;
	}
	.qy3{
		text-align: center;
		    position: relative;
	}
	.qy3 i{
		display: inline-block;
		   width: .84rem;
		   height: .84rem;
		    background: no-repeat center/cover;
		    margin-bottom: .1rem;
		    position: relative;
			background-image: url(../../assets/img/icon_evaluate_3@2x.png)
	}
	.qy3 p{
		font-size: .34rem;
		    color: #363636;
		    line-height: 1;
	}
	.qy4{
		text-align: center;
		    position: relative;
	}
	.qy4 i{
		display: inline-block;
		    width: .84rem;
		    height: .84rem;
		    background: no-repeat center/cover;
		    margin-bottom: .1rem;
		    position: relative;
			background-image: url(../../assets/img/icon_refund_3@2x.png)
	}
	.qy4 p{
		font-size: .34rem;
		    color: #363636;
		    line-height: 1;
	}
	.pi1{
		margin-top: .8rem;
		    padding: 0 .2rem 0 .3rem;
		    background: #fff;
	}
	.pi2{
		display: flex;
		    justify-content: space-between;
		    align-items: center;
		    height: .88rem;
		    font-size: .42rem;
		    font-weight: bold;
		    color: #000;
	}
	.pi2 i{
		display: inline-block;
		    width: .2rem;
		    height: .38rem;
		    background: url(../../assets/img/img5.b2d8430d.png) center center no-repeat;
		    background-size: 100% 100%;
	}
	.r1{
		margin-top: .2rem;
		    padding: .4rem .2rem 0 .3rem;
		    background: #fff;
	}
	.r2{
		font-size: .32rem;
		    font-weight: bold;
		    color: #000;
	}
	.r3{
		margin-top: .5rem;
	}
	.r4{
		   display: flex;
		    align-items: center;
		    padding-bottom: .6rem;
	}
	.r4 p{
		    margin-top: 1.85rem;
		    font-size: .34rem;
		    color: #333;
	}
	.r4 a{
		display: flex;
		    flex-direction: column;
		    align-items: center;
		    width: 25%;
	}
	.w1{
		display: inline-block;
		    width: 1.5rem;
		    height: 1.5rem;
		    background: center bottom no-repeat;
			 position: relative;
			background-image: url(../../assets/img/address.388ac7b7.png);
	}
	.w2{
		display: inline-block;
		    width: 1.5rem;
		    height: 1.5rem;
		    background: center bottom no-repeat;
			background-image: url(../../assets/img/traveler.fe27cdf1.png);
	}
	.w3{
		display: inline-block;
		    width: 1.5rem;
		    height: 1.5rem;
		    background: center bottom no-repeat;
			background-image: url(../../assets/img/password.e519895e.png);
	}
	.w4{
		display: inline-block;
		    width: 1.5rem;
		    height: 1.5rem;
		    background: center bottom no-repeat;
			background-image: url(../../assets/img/service.45bb9e55.png);
	}
	.w5{
		display: inline-block;
		    width: 1.5rem;
		    height: 1.5rem;
		    background: center bottom no-repeat;
			background-image: url(../../assets/img/app.f6c612d0.png);
	}
	.gg{
		display: flex;
		    flex-direction: column;
		    align-items: center;
		    width: 100%;
	}
	.gi{
		display: flex;
		    justify-content: center;
		    align-items: center;
		    width: 100%;
		    height: 1.12rem;
		    font-size: .32rem;
		    font-weight: bold;
		    color: #000;
			margin-top: 20px;
	}
	.gu{
		display: flex;
		   justify-content: space-between;
		    flex-wrap: wrap;
			margin: auto;
	}
	
	.gu2{
		background-image: url(../../assets/img/5fb1e682c25ef.jpg);
		position: relative;
		    width: 4.58rem;
		    height: 2.38rem;
		    border-radius: .07rem;
		    background-size: cover;
		    box-sizing: border-box;
			margin-left: -30px;
	}
	.gy{
		background-image: url(../../assets/img/585a348ad0111.jpg);
		position: relative;
		    width: 4.58rem;
		    height: 2.38rem;
		    border-radius: .07rem;
		    background-size: cover;
		    box-sizing: border-box;
			margin-left: 20px;
	}
	.gy2{
		background-image: url(../../assets/img/5fe4641c37d16.jpg);
		position: relative;
		    width: 4.58rem;
		    height: 2.38rem;
		    border-radius: .07rem;
		    background-size: cover;
		    box-sizing: border-box;
			margin-left: 20px;
	}
	.gy3{
		background-image: url(../../assets/img/5d5e58261cffc.jpg);
		position: relative;
		    width: 4.58rem;
		    height: 2.38rem;
		    border-radius: .07rem;
		    background-size: cover;
		    box-sizing: border-box;
			margin-left: 20px;
	}
	.gy4{
		background-image: url(../../assets/img/5dde4a95ab709.jpg);
		position: relative;
		    width: 4.58rem;
		    height: 2.38rem;
		    border-radius: .07rem;
		    background-size: cover;
		    box-sizing: border-box;
			margin-left: 20px;
	}
	.gy5{
		background-image: url(../../assets/img/5978141e9ad0c.jpg);
		position: relative;
		    width: 4.58rem;
		    height: 2.38rem;
		    border-radius: .07rem;
		    background-size: cover;
		    box-sizing: border-box;
			margin-left: 20px;
	}
	.gy6{
		background-image: url(../../assets/img/5c3e8ed8aa4b2.jpg);
		position: relative;
		    width: 4.58rem;
		    height: 2.38rem;
		    border-radius: .07rem;
		    background-size: cover;
		    box-sizing: border-box;
			margin-left: 20px;
	}
	.gy7{
		background-image: url(../../assets/img/d69663234dc3a395.jpg);
		position: relative;
		    width: 4.58rem;
		    height: 2.38rem;
		    border-radius: .07rem;
		    background-size: cover;
		    box-sizing: border-box;
			margin-left: 20px;
	}
	.gy8{
		background-image: url(../../assets/img/5fd2dd158f236.jpg);
		position: relative;
		    width: 4.58rem;
		    height: 2.38rem;
		    border-radius: .07rem;
		    background-size: cover;
		    box-sizing: border-box;
			margin-left: 20px;
	}
	.diao{
		background-image: url(../../assets/img/d567814af581b5a0.jpg);
		position: relative;
		    width: 4.58rem;
		    height: 2.38rem;
		    border-radius: .07rem;
		    background-size: cover;
		    box-sizing: border-box;
			margin-left: -30px;
	}
	.gu3{
		position: absolute;
		    left: 0;
		    top: .12rem;
		    padding-left: .1rem;
		    padding-right: .2rem;
		    height: .32rem;
		    line-height: .32rem;
		    font-size: .32rem;
		    color: #fff;
		    border-radius: 0 .16rem .16rem 0;
		    background: rgba(0,0,0,.6);
	}
	.gu4{
		background-image: url(../../assets/img/dbb525dd72bb03d2.png);
		position: absolute;
		    right: .16rem;
		    bottom: .56rem;
		    width: 1.3rem;
		    height: .25rem;
		    line-height: .25rem;
		    text-align: center;
		    font-size: .2rem;
		    color: #333;
		    border-radius: .04rem;
		    background: center center no-repeat;
		    background-size: cover;
		
	}
	.gu5{
		position: absolute;
		    right: 0;
		    bottom: 0;
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
		    padding: 0 .15rem;
		    min-width: 1.4rem;
		    height: .6rem;
		    z-index: 9;
		    background: center center no-repeat;
		    background-size: cover;
		    overflow: hidden;
			background-image: url(../../assets/img/icon_list_back.png);
	}
	.gu5 b{
		line-height: .28rem;
		    font-size: .2rem;
		    font-weight: normal;
		    color: #fff;
		    white-space: nowrap;
		    text-overflow: ellipsis;
		    overflow: hidden;
	}
	.gu6{
		display: -webkit-box;
		    -webkit-box-orient: vertical;
		    -webkit-line-clamp: 2;
		    margin-top: .1rem;
		    padding: 0 .1rem;
		    height: .69rem;
		    line-height: .34rem;
		    font-size: .38rem;
		    color: #333;
		    overflow: hidden;
			width: 250px;
			margin-left: 20px;
	}
	.gu7{
		display: flex;
		    align-items: baseline;
		    font-size: .24rem;
		    color: #999;
	}
	.gu7 span{
		margin-top: 20px;
		font-size: .34rem;
		    color: #ff7100;
			margin-left: 10px;
	}
	.gu7 b{
		font-size: .4rem;
		    color: #ff7100;
	}
	.gu7 p{
		margin-left: 110px;
		font-size: .3rem;
	}
	.gu8{
		padding: .03rem .1rem;
		    font-size: .24rem;
		    color: #999;
		    background: #eee;
	}
	.cc{
		display: -webkit-box;
		    -webkit-box-orient: vertical;
		    -webkit-line-clamp: 2;
		    margin-top: .1rem;
		    padding: 0 .1rem;
		    height: .67rem;
		    line-height: .34rem;
		    font-size: .38rem;
		    color: #333;
		    overflow: hidden;
			width: 250px;
	}
</style>
